<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人驾驶舱 (可编辑版)</title>
    <style>
        /* 基础样式 */
        body, html { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f4f7f9; color: #333; }
        .container { display: flex; height: 100vh; }
        .sidebar { width: 280px; background-color: #ffffff; border-right: 1px solid #e0e0e0; padding: 20px; overflow-y: auto; box-shadow: 2px 0 5px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
        .sidebar-header { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; }
        .sidebar-header h1 { font-size: 24px; margin: 0; color: #1a73e8; }
        .sidebar-content { flex-grow: 1; }
        .link-category { margin-bottom: 25px; }
        .link-category h2 { font-size: 16px; color: #5f6368; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
        .sidebar ul { list-style: none; padding: 0; margin: 0; }
        .sidebar li { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
        .sidebar a { text-decoration: none; color: #3c4043; display: block; padding: 8px 12px; border-radius: 8px; transition: background-color 0.2s ease, color 0.2s ease; font-size: 14px; flex-grow: 1; }
        .sidebar a:hover, .sidebar a.active { background-color: #e8f0fe; color: #1967d2; }
        .sidebar a .external-icon { display: inline-block; margin-left: 4px; font-size: 12px; color: #888; transform: translateY(-1px); }
        .content { flex-grow: 1; display: flex; flex-direction: column; }
        iframe { flex-grow: 1; border: none; width: 100%; height: 100%; background-color: #fff; }
        .loading { padding: 20px; color: #999; }

        /* 编辑模式下的样式 */
        .edit-controls { display: none; align-items: center; }
        .edit-mode .edit-controls { display: flex; }
        .delete-btn { cursor: pointer; padding: 4px; font-size: 16px; color: #c5221f; border: none; background: none; opacity: 0.6; }
        .delete-btn:hover { opacity: 1; }
        .toggle-switch { position: relative; display: inline-block; width: 34px; height: 20px; margin: 0 8px; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
        .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: #2196F3; }
        input:checked + .slider:before { transform: translateX(14px); }

        /* 添加链接表单 */
        #add-link-form { display: none; background-color: #f9f9f9; padding: 15px; border-radius: 8px; margin-top: 20px; }
        .form-group { margin-bottom: 10px; }
        .form-group label { display: block; margin-bottom: 5px; font-size: 12px; color: #5f6368; }
        .form-group input { width: calc(100% - 16px); padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .form-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
        .form-buttons button { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; }
        #save-link-btn { background-color: #1a73e8; color: white; }
        #cancel-add-btn { background-color: #eee; }

        /* 底部按钮区 */
        .sidebar-footer { margin-top: auto; padding-top: 15px; border-top: 1px solid #eee;}
        .data-management { display: flex; gap: 10px; margin-bottom: 10px; }
        .data-management button { flex-grow: 1; padding: 8px; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 12px; }
        .data-management button:hover { background-color: #e0e0e0; }
        #edit-mode-toggle { width: 100%; padding: 8px; background-color: #e0e0e0; border: none; border-radius: 4px; cursor: pointer; }
        #edit-mode-toggle.active { background-color: #ffc107; }
    </style>
</head>
<body>

    <div class="container">
        <!-- 左侧导航栏 -->
        <div id="sidebar" class="sidebar">
            <div class="sidebar-header">
                <h1>我的驾驶舱</h1>
            </div>
            <div id="link-container" class="sidebar-content">
                <div class="loading">正在加载链接...</div>
            </div>
            <div class="sidebar-footer">
                <form id="add-link-form">
                    <h4>添加新链接</h4>
                    <div class="form-group">
                        <label for="link-name">名称</label>
                        <input type="text" id="link-name" required>
                    </div>
                    <div class="form-group">
                        <label for="link-url">URL</label>
                        <input type="url" id="link-url" required>
                    </div>
                    <div class="form-group">
                        <label for="link-category">分类</label>
                        <input type="text" id="link-category" required placeholder="输入现有或新的分类名">
                    </div>
                    <div class="form-buttons">
                        <button type="button" id="cancel-add-btn">取消</button>
                        <button type="submit" id="save-link-btn">保存</button>
                    </div>
                </form>
                <div class="data-management">
                    <button id="import-btn">导入配置</button>
                    <button id="export-btn">导出配置</button>
                    <input type="file" id="import-file" accept=".json" style="display: none;">
                </div>
                <button id="edit-mode-toggle">进入编辑模式</button>
            </div>
        </div>

        <!-- 右侧内容显示区 -->
        <div class="content">
            <iframe name="content_frame" id="content_frame" src="https://cn.bing.com"></iframe>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('link-container');
            const iframe = document.getElementById('content_frame');
            const sidebar = document.getElementById('sidebar');
            const editModeToggle = document.getElementById('edit-mode-toggle');
            const addLinkForm = document.getElementById('add-link-form');
            const cancelAddBtn = document.getElementById('cancel-add-btn');
            const importBtn = document.getElementById('import-btn');
            const exportBtn = document.getElementById('export-btn');
            const importFile = document.getElementById('import-file');

            let linksData = [];
            let currentActiveLink = null;

            const defaultLinks = [
              { "category": "灵感与洞察", "links": [ { "name": "Product Hunt", "url": "https://www.producthunt.com/", "external": true }, { "name": "Hacker News", "url": "https://news.ycombinator.com/show" }, ] },
              { "category": "开发与构建", "links": [ { "name": "GitHub", "url": "https://github.com/", "external": true }, { "name": "Godot Engine", "url": "https://godotengine.org/" } ] }
            ];

            // --- 数据处理 ---
            function loadData() {
                const storedData = localStorage.getItem('dashboardLinks');
                linksData = storedData ? JSON.parse(storedData) : defaultLinks;
                renderLinks();
            }

            function saveData() {
                localStorage.setItem('dashboardLinks', JSON.stringify(linksData));
                renderLinks();
            }
            
            function exportData() {
                const dataStr = JSON.stringify(linksData, null, 2);
                const blob = new Blob([dataStr], {type: 'application/json'});
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'dashboard-links.json';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }

            // --- 渲染 ---
            function renderLinks() {
                container.innerHTML = '';
                linksData.forEach((cat, catIndex) => {
                    const categoryDiv = document.createElement('div');
                    categoryDiv.className = 'link-category';

                    const categoryTitle = document.createElement('h2');
                    categoryTitle.textContent = cat.category;
                    categoryDiv.appendChild(categoryTitle);

                    const linkList = document.createElement('ul');
                    cat.links.forEach((link, linkIndex) => {
                        const listItem = document.createElement('li');
                        
                        const linkAnchor = document.createElement('a');
                        linkAnchor.href = link.url;
                        linkAnchor.innerHTML = link.external ? `${link.name} <span class="external-icon">↗</span>` : link.name;
                        linkAnchor.addEventListener('click', (e) => handleLinkClick(e, link, linkAnchor));
                        
                        listItem.appendChild(linkAnchor);
                        
                        const editControls = document.createElement('div');
                        editControls.className = 'edit-controls';

                        const toggleLabel = document.createElement('label');
                        toggleLabel.className = 'toggle-switch';
                        const toggleInput = document.createElement('input');
                        toggleInput.type = 'checkbox';
                        toggleInput.checked = link.external || false;
                        toggleInput.addEventListener('change', () => {
                            link.external = toggleInput.checked;
                            saveData();
                        });
                        toggleLabel.append(toggleInput, document.createElement('span'));
                        toggleLabel.querySelector('span').className = 'slider';

                        const deleteBtn = document.createElement('button');
                        deleteBtn.innerHTML = '×';
                        deleteBtn.className = 'delete-btn';
                        deleteBtn.title = '删除链接';
                        deleteBtn.addEventListener('click', () => {
                            // 使用浏览器的 confirm 对话框进行确认
                            if (window.confirm(`确定要删除 "${link.name}" 吗？`)) {
                                cat.links.splice(linkIndex, 1);
                                if (cat.links.length === 0) {
                                    linksData.splice(catIndex, 1);
                                }
                                saveData();
                            }
                        });

                        editControls.append(toggleLabel, deleteBtn);
                        listItem.appendChild(editControls);
                        linkList.appendChild(listItem);
                    });
                    categoryDiv.appendChild(linkList);
                    container.appendChild(categoryDiv);
                });
            }
            
            // --- 事件处理 ---
            function handleLinkClick(event, link, element) {
                event.preventDefault();
                if (currentActiveLink) currentActiveLink.classList.remove('active');
                
                if (link.external) {
                    window.open(link.url, '_blank', 'noopener,noreferrer');
                    iframe.src = `data:text/html,<body style="font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 90vh; color: #888; text-align: center;"><h1>'${link.name}'<br/>已在新标签页中打开</h1></body>`;
                } else {
                    iframe.src = link.url;
                    element.classList.add('active');
                    currentActiveLink = element;
                }
            }

            editModeToggle.addEventListener('click', () => {
                sidebar.classList.toggle('edit-mode');
                const isActive = sidebar.classList.contains('edit-mode');
                editModeToggle.textContent = isActive ? '完成编辑' : '进入编辑模式';
                editModeToggle.classList.toggle('active', isActive);
                addLinkForm.style.display = isActive ? 'block' : 'none';
            });

            addLinkForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const name = document.getElementById('link-name').value;
                const url = document.getElementById('link-url').value;
                const category = document.getElementById('link-category').value;

                let categoryExists = linksData.find(c => c.category === category);
                if (categoryExists) {
                    categoryExists.links.push({ name, url, external: false });
                } else {
                    linksData.push({ category, links: [{ name, url, external: false }] });
                }
                saveData();
                addLinkForm.reset();
            });

            cancelAddBtn.addEventListener('click', () => {
                addLinkForm.reset();
                addLinkForm.style.display = 'none';
                sidebar.classList.remove('edit-mode');
                editModeToggle.textContent = '进入编辑模式';
                editModeToggle.classList.remove('active');
            });
            
            exportBtn.addEventListener('click', exportData);
            
            importBtn.addEventListener('click', () => {
                importFile.click();
            });

            importFile.addEventListener('change', (event) => {
                const file = event.target.files[0];
                if (!file) return;

                const reader = new FileReader();
                reader.onload = (e) => {
                    try {
                        const importedData = JSON.parse(e.target.result);
                        if (Array.isArray(importedData)) {
                            linksData = importedData;
                            saveData();
                            alert('配置导入成功！');
                        } else {
                            throw new Error('JSON文件格式不正确。');
                        }
                    } catch (error) {
                        alert(`导入失败: ${error.message}`);
                    }
                };
                reader.onerror = () => {
                    alert('读取文件失败！');
                };
                reader.readAsText(file);
                importFile.value = '';
            });

            // --- 初始化 ---
            loadData();
        });
    </script>

</body>
</html>
